<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>
<#import "../manage/menu-form.ftl" as menuform/>
<#import "../common/menuTree.ftl" as menuTree/>

<!DOCTYPE html>
<html>
<@layout.head title="模块管理">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@mform.head/>
    <@menuTree.head/>
</@layout.head>
<body>
<@layout.page>
<#--指定皮肤,上下栏是否fixed-->
<#--<body class="theme-whbl fixed-header fixed-footer">-->
<#--<div id="theme-wrapper">-->
<#--最上面一层TOPBAR-->
<!-- 标题 -->
<div class="main-box">
    <#--<h4 class="page-header">-->
        <#--<i class="fa fa-cog fa-spin"></i>-->
        <#--模块管理-->
    <#--</h4>-->
    <div class="content">
        <!-- 按钮 -->
        <div class="row">
            <div class="col-lg-12">
                <!-- Button trigger modal -->
                <div class="btn-group">
                    <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm">
                        <i class="fa fa-plus"></i> 新增一级菜单
                    </button>
                    <button id="btnAddMenu" type="button" class="btn btn-blue btn-sm">
                        <i class="fa fa-plus"></i> 新增子菜单
                    </button>
                    <button id="btnModifyMenu" type="button" class="btn btn-blue btn-sm">
                        <i class="fa fa-edit"></i> 修改菜单信息
                    </button>
                    <button id="btnDeleteMenu" type="button" class="btn btn-blue btn-sm">
                        <i class="fa fa-remove"></i> 删除菜单
                    </button>
                </div>
            </div>
        </div>
        <!-- 表格 -->
    <#--内容开始------------------------------------------------>
        <div class="row" style="margin-top: 10px;">
            <div class="col-sm-8 col-md-6" style="max-height: 500px; overflow: auto;">
            <#--获取菜单树形结构-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <b>菜单列表</b>
                    </div>
                    <div id="menuTree" class="panel-body fancytree-colorize-hover fancytree-fade-expander"
                         style="min-height: 300px;padding: 0;">
                    </div>
                <#--<div class="panel-footer">-->
                <#--<button id="btnExpandAll" class="btn btn-xs btn-primary">展开全部</button>-->
                <#--<button id="btnCollapseAll" class="btn btn-xs btn-warning">收缩全部</button>-->
                <#--</div>-->
                </div>
            </div>
            <div id="panel-menu-detail" class="col-sm-4 col-md-6">
            <#--菜单对应属性-->
                <div class="panel panel-default">
                    <@menuform.menuform readonly="true"></@menuform.menuform>
                </div>
            </div>
        </div>
    <#--内容结束------------------------------------------------>
    </div>
</div>
    <@menuform.modal id="menuModal"/>
</@layout.page>

<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@mform.foot/>
    <@menuTree.foot/>

<script type="text/javascript">
    var menuService = new MenuService();
    var menuxh = null;

    var glyph_opts = {
        map: {
            doc: "glyphicon glyphicon-file",
            docOpen: "glyphicon glyphicon-file",
            checkbox: "glyphicon glyphicon-unchecked",
            checkboxSelected: "glyphicon glyphicon-check",
            checkboxUnknown: "glyphicon glyphicon-share",
            dragHelper: "glyphicon glyphicon-play",
            dropMarker: "glyphicon glyphicon-arrow-right",
            error: "glyphicon glyphicon-warning-sign",
            expanderClosed: "glyphicon glyphicon-menu-right",
            expanderLazy: "glyphicon glyphicon-menu-right",  // glyphicon-plus-sign
            expanderOpen: "glyphicon glyphicon-menu-down",  // glyphicon-collapse-down
            folder: "glyphicon glyphicon-folder-close",
            folderOpen: "glyphicon glyphicon-folder-open",
            loading: "glyphicon glyphicon-refresh glyphicon-spin"
        }
    };

    var menuTree = $("#menuTree").fancytree({
        extensions: ["edit", "glyph", "wide"],
        checkbox: false,
        glyph: glyph_opts,
        selectMode: 1,
        source: {url: "${request.contextPath}/modelmanage/menutree"},
        wide: {
            iconWidth: "1em",     // Adjust this if @fancy-icon-width != "16px"
            iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
            levelOfs: "1.5em"     // Adjust this if ul padding != "16px"
        },
        toggleEffect: {effect: "drop", options: {direction: "left"}, duration: 400},
        icon: function (event, data) {
            if (data.node.isFolder()) {
//                return "glyphicon glyphicon-book";
            }
        },
        activate: function (event, data) {
            onMenuNodeActivate(data.node);
        }
    });

    $("#btnAddTopMenu").click(function () {
        $('#menuModal form').data("update-type", "NEW.TOP");
        clearForm($('#menuModal'));
        $('#menuModal').modal();
        $("#iOrder").val(0);
        $('#menuModal').find("#cURL").parent().parent().attr("style", "display:none");
    });
    $("#btnAddMenu").click(function () {
        if (menuxh == null) {
            swal("错误", "请选择一个父节点", "error");
            return;
        }
        $('#menuModal form').data("update-type", "NEW.CHILD");
        clearForm($('#menuModal'));
        $("#menuModal #iOrder").val(0);
        $('#menuModal #txtId').val(menuxh);
        $('#menuModal').modal();
        $('#menuModal').find("#cURL").parent().parent().attr("style", "display:block");
    });
    $("#btnModifyMenu").click(function () {
        $('#menuModal form').data("update-type", "EDIT");
        fillMenuForm($('#menuModal'), menuxh, function (data) {
            //原来为空也允许修改
//            if (data.cURL == null || data.cURL == "") {
//                $('#menuModal').find("#cURL").parent().parent().attr("style", "display:none");
//            } else {
//                $('#menuModal').find("#cURL").parent().parent().attr("style", "display:block");
//            }
            $('#menuModal').modal();
        });
    });

    $("#btnSave").click(function () {
        var updateType = $('#menuModal form').data("update-type");
        if (!$.isNumeric($("#menuModal #iOrder").val()) || $("#menuModal #iOrder").val().indexOf('.') >= 0) {
            swal("错误", "序号应该是一个整数", "error");
            return;
        }
        menuService.saveMenu(updateType, $('#menuModal form'), function (updateType, data) {
            var tree = menuTree.fancytree("getTree");
            if (updateType == "NEW.TOP") {
                tree.getRootNode().addChildren({"key": data.cModelID, "title": data.cModelName});
                tree.activateKey(data.cModelID);
            }
            if (updateType == "NEW.CHILD") {
                tree.getActiveNode().addChildren({"key": data.cModelID, "title": data.cModelName});
                tree.activateKey(data.cModelID);
            }
            if (updateType == "EDIT") {
                tree.getActiveNode().setTitle(data.cModelName);
                tree.activateKey("");
                tree.activateKey(data.cModelID);
            }

            $('#menuModal').modal('hide');
        });
    });

    $("#btnDeleteMenu").click(function () {
        var tree = menuTree.fancytree("getTree");
        if (tree.getActiveNode() == null)
            return;
        var menuxh = tree.getActiveNode().key;

        menuService.deleteWebMenu(menuxh, function () {
            tree.getActiveNode().remove();
            clearForm($('#panel-menu-detail'));
        });
    });

    $('#btnSyncMenu').on('click', function () {
        //var $btn = $(this).button('loading');
        menuService.syncPermission(function () {
            //$btn.button('reset');
        });
    });

    function onMenuNodeActivate(node) {
        menuxh = node.key;
        fillMenuForm($('#panel-menu-detail'), menuxh);
    }

    function fillMenuForm(element, cModelID, success, failed) {
        var $panel = $(element);
        $panel.loader('show', '<i class="fa fa-4x fa-spinner fa-spin"></i>');
        menuService.loadMenuDetail(menuxh, function (data) {
            initFormItemData($panel, data);
            $panel.loader('hide');
            if (success != null)
                success(data);
        }, function (errMsg) {
            clearForm($panel);
            swal("错误", data, "error");
            $panel.loader('hide');
            if (failed != null)
                failed();
        });
    }
</script>
</@layout.foot>
</body>
</html>